<template>
  <div class="system-add-role-container">
    <el-dialog title="修改发布信息" :close-on-click-modal="false" v-model="isShowDialog" width="769px">
      <el-form :model="ruleForm" size="small" label-width="90px" ref="ruleFormRef">
        <el-row :gutter="35">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="发布人">
              <el-input v-model="ruleForm.roleName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
          </el-col>
        </el-row>
        <el-row :gutter="35">

          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="发布范围">
              <el-select
                  v-model="ruleForm.schoolIds"
                  filterable
                  :collapse-tags="true"
                  :collapse-tags-tooltip="true"
                  multiple
                  style="width: 260px;">
                <el-option
                    v-for="item in menuData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id.toString()"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">

          </el-col>
        </el-row>
        <el-row :gutter="35">
          <el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20" class="mb20">
            <el-form-item label="发布内容">

              <el-input v-model="ruleForm.content" :rows="10" type="textarea" placeholder="请输入发布内容">
              </el-input>

            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
      <template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="small">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="small">修 改</el-button>
				</span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import {reactive, toRefs, ref} from 'vue';
import type {ElForm} from 'element-plus';
import {getschoolList} from '../../../api/information/index'

export default {
  name: 'systemAddRole',
  emits: ['update'],
  setup(props: any, {emit}: any) {
    const state = reactive({
      isShowDialog: false,
      placContent: '',
      ruleForm: {
        roleName: '中心端用户',
        content: '',//内容
        schoolIds: [],
        status: '',
        id: '',
      },
      schoolist: '',
      menuData: [],
      menuProps: {
        children: 'children',
        label: 'label',
      },
    });
    const ruleFormRef = ref<InstanceType<typeof ElForm>>();
    // 打开弹窗
    const checkNull = (schoolIds: string): string[] => {
      let returnArr: string[] = [];
      let splitArr: string[] = schoolIds.split(',');
      returnArr = splitArr.filter((item: string) => {
        return item !== '';
      })
      console.log('returnArr', returnArr);
      return returnArr;
    }
    const openDialog = (row: any) => {
      getschoolList().then((res: any) => {


        state.menuData = res.data;
        state.isShowDialog = true;
        setTimeout(() => {
          const rowList = row;
          state.ruleForm.roleName = '中心端用户'
          state.ruleForm.content = rowList.content
          state.schoolist = rowList.schoolIds
          state.ruleForm.schoolIds = checkNull(rowList.schoolIds);
          state.ruleForm.id = rowList.id
          state.placContent = rowList.schoolNames
          ruleFormRef.value?.resetFields();
        }, 200)
      })
    };
    // 关闭弹窗
    const closeDialog = () => {
      state.isShowDialog = false;
    };
    // 取消
    const onCancel = () => {
      closeDialog();
    };
    const getListschoole = () => {

      getschoolList().then((res: any) => {
        state.menuData = res.data
      })
    }
    // 修改
    const onSubmit = () => {
      let schoolarr = state.ruleForm.schoolIds.join(',')
      state.ruleForm.schoolIds = schoolarr
      let params = JSON.parse(JSON.stringify(state.ruleForm))
      emit('update', params)
    };

    return {
      openDialog,
      closeDialog,
      onCancel,
      onSubmit,
      ruleFormRef,
      ...toRefs(state),
    };
  },
};
</script>

<style scoped lang="scss">
.system-add-role-container {
  .menu-data-tree {
    border: var(--el-input-border, var(--el-border-base));
    border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
    padding: 5px;
  }
}
</style>
